<template>
	<div>
		<el-row :span="24" style="margin:26px 0;">
		     <el-button  @click="goBack()" type="primary" >返回</el-button>
		</el-row>
		<div>
			  <el-tabs v-model="activeName" @tab-click="handleClick">
			    <el-tab-pane :label="'一级创客('+countCreator+')'" name="first">
					<el-table
					        :data="pageInfo.dtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					    <el-table-column
					            prop="userName" 
					            label="用户昵称">
					    </el-table-column>
					    <el-table-column
					            label="时间"
								prop="bindTime">
					    </el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange"
					            :current-page="pageInfo.pageNum"
					            :page-size="pageInfo.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane :label="'二级创客('+countTwoCreator+')'" name="second">
					<el-table
					        :data="pageInfo2.dtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					 <el-table-column
					         prop="userName" 
					         label="用户昵称">
					  
					 </el-table-column>
					 <el-table-column
					         label="时间"
					 		prop="bindTime">
					 					
					 </el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange2"
					            :current-page="pageInfo2.pageNum"
					            :page-size="pageInfo2.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo2.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane :label="'一级用户('+userInviteCount+')'" name="third">
					<el-table
					        :data="pageInfo3.dtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					   <el-table-column
					           prop="userName" 
					           label="用户昵称">
					    
					   </el-table-column>
					   <el-table-column
					           label="时间"
					   		prop="bindTime">
					   					
					   </el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange3"
					            :current-page="pageInfo3.pageNum"
					            :page-size="pageInfo3.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo3.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane :label="'二级用户('+userTwoInviteCount+')'" name="four">
					<el-table
					        :data="pageInfo4.dtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					 <el-table-column
					         prop="userName" 
					         label="用户昵称">
					  
					 </el-table-column>
					 <el-table-column
					         label="时间"
					 		prop="bindTime">
					 					
					 </el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange4"
					            :current-page="pageInfo4.pageNum"
					            :page-size="pageInfo4.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo4.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			  </el-tabs>
		</div>
	</div>
</template>

<style>
	.el-tabs__item{
		font-size: 18px;
		font-weight: 500!important;
	}
</style>
<script>
	export default {
		data() {
			return {
				activeName: 'first',
				value: '',
						table_loading: false,
						formInline: {
						    flag:'3',
							userId: '',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						countCreator: '',
						countTwoCreator: '',
						userInviteCount: '',
						userTwoInviteCount: '',
						formInline2: {
						    flag:'4',
							userId: '',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						formInline3: {
						    flag:'1',
							userId: '',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						formInline4: {
						    flag:'2',
							userId: '',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						type: '',
						pageInfo: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						pageInfo2: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						pageInfo3: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						pageInfo4: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						formActStatList: [
							{
								value: 'B',
								label: '审核中'
							},
							{
								value: 'L',
								label: '平台拒绝'
							},
							{
								value: 'P',
								label: '平台通过'
							},
							{
								value: 'F',
								label: '快捷通拒绝'
							},
							{
								value: 'S',
								label: '通过'
							}
						],
						moneyInfo: [
							{
								userName: '',
								sumIncomeToday: '',
								sumIncome: ''
							}
						]
			}
		},
		created() {
	
		},
		activated() {
		    this.fetchData(1);
			this.fetchData2(1);
			this.fetchData3(1);
			this.fetchData4(1);
		},
		methods: {
			goBack(){
				this.$router.push({path:"/user/creator_detail/",query:{id:this.$route.params.id}})
				// this.$router.push('/user/creator_detail/' +$route.query.id)
			},
			changeType() {
				console.log('change创客筛选条件')
			},
			handleClick(tab, event) {
				if(this.activeName == 'first') {
					this.fetchData(1);
				}
				if(this.activeName == 'second') {
					this.fetchData2(1);
				}
				if(this.activeName == 'third') {
					this.fetchData3(1);
				}
				if(this.activeName == 'four') {
					this.fetchData4(1);
				}
			},
			// 一级创客
			fetchData(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.formInline.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('selectUserNext',this.formInline, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo = res
						this.countCreator = res.count
						// console.log(this.pageInfo,'一级创客')
			        }
			    });
			},
			handleCurrentChange(val) {
			   this.fetchData(val)            
			},
			// 二级创客
			fetchData2(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo2.pageNum = page
				this.formInline2.pageNum = this.pageInfo2.pageNum
				this.formInline2.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('selectUserNext',this.formInline2, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo2 = res
						this.countTwoCreator = res.count
						// console.log(this.pageInfo2,'二级创客')
			        }
			    });
			},
			handleCurrentChange2(val) {
			   this.fetchData2(val)            
			},
			// 一级用户
			fetchData3(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo3.pageNum = page
				this.formInline3.pageNum = this.pageInfo3.pageNum
				this.formInline3.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('selectUserNext',this.formInline3, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo3 = res
						this.userInviteCount = res.count
						// console.log(this.pageInfo3,'一级用户')
			        }
			    });
			},
			handleCurrentChange3(val) {
			   this.fetchData3(val)            
			},
			// 二级用户
			fetchData4(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo4.pageNum = page
				this.formInline4.pageNum = this.pageInfo4.pageNum
				this.formInline4.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('selectUserNext',this.formInline4, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo4 = res
						this.userTwoInviteCount = res.count
						// console.log(this.pageInfo4,'一级用户')
			        }
			    });
			},
			handleCurrentChange4(val) {
			   this.fetchData4(val)            
			},
		}
	}
</script>

